import axios from '@/utils/request'
export default {
  Specification: {
    form: {
      fields: [
        { property: 'product', type_options: { disabled: true } },
        {
          property: 'name',
          type_options: { label: '规格' }
        },
        'sku',
        'listOrder',
        'price'
      ]
    },
    list: {
      query: {
        '@filter': 'entity.getProduct().getIsOnSale() == true && entity.getProduct().getIsDeleted() == false',
        '@order': 'entity.listOrder|ASC'
      },
      list_display: [
        { property: 'name', editable: true },
        { property: 'listOrder', editable: true },
        { property: 'price', editable: true },
        {
          property: 'id',
          label: '关联物料',
          component: {
            props: ['data'],
            data() {
              return {
                specificationMaterials: [],
                materials: [],
                show: false,
                material: '',
                quantity: 1,
                scope: ''
              }
            },
            created() {
              this.getSpecificationMatrerials()
              this.axios.get(`/manage/materials`, {params: {limit: 1000}} ).then((res) => {
                this.materials = res.data
              })
            },
            methods: {
              getSpecificationMatrerials() {
                this.axios.get(`/manage/specification-materials`, {
                  params: {
                    '@filter': `entity.getSpecification().getId() == ${this.data}`,
                    '@display': `{
                      'id' : 'entity.getId()',
                      'name' : 'entity.getMaterial().getName()',
                      'unit' : 'entity.getMaterial().getUnit()',
                      'quantity': 'entity.getQuantity()'
                    }`
                  }
                }).then((res) => {
                  console.log('物料关联表', res.data)
                  this.specificationMaterials = res.data
                })
              }
            },
            render(h) {
              return (
                <div>
                  <el-table
                    data={this.specificationMaterials}
                    style='width: 100%'>
                    <el-table-column
                      prop='name'
                      label='物料'>
                    </el-table-column>
                    <el-table-column
                      prop='unit'
                      label='单位'>
                    </el-table-column>
                    <el-table-column
                      prop='quantity'
                      label='数量'>
                    </el-table-column>
                  </el-table>
                  <div style='padding-top:10px;'>
                    <el-button type='text' onClick={() => { this.show = true }}>设置</el-button>
                  </div>
                  <el-dialog
                    title='产品物料设置'
                    visible={this.show}
                    width='50%'
                    onClose={() => { this.show = false }}
                  >
                    <div>
                      <el-table
                        data={this.specificationMaterials}
                        style='width: 100%'>
                        <el-table-column
                          prop='name'
                          label='物料'>
                        </el-table-column>
                        <el-table-column
                          prop='unit'
                          label='单位'>
                        </el-table-column>
                        <el-table-column
                          prop='quantity'
                          label='数量'>
                        </el-table-column>
                        <el-table-column
                          label='操作'
                          scopedSlots={{
                            default: (scope) => (
                              <div>
                                {/* <el-popconfirm
                                  title='是否确定删除'
                                  onConfirm={() =>
                                    this.deleteSpecificationMaterial(1)
                                  }
                                > */}
                                {/* 将 el-button 作为 el-popconfirm 的默认插槽内容 */}
                                <el-button type='text' onClick={() => {
                                  console.log(scope)
                                  this.axios.delete('/manage/specification-materials/' + scope.row.id).then((res) => {
                                    this.$message.success('删除成功！')
                                    this.getSpecificationMatrerials()
                                  })
                                }} slot='reference'>删除</el-button>
                                {/* </el-popconfirm> */}
                              </div>
                            )
                          }}
                        />
                      </el-table>
                    </div>
                    <div style='margin-top:10px'>
                      <el-row>
                        <el-col span={12}>
                          <div>
                            <el-select v-model={this.material} filterable placeholder='请选择物料'>
                              {this.materials.map(v => {
                                return <el-option
                                  key={v.id}
                                  label={v.__toString}
                                  value={v.id}>
                                </el-option>
                              })}
                            </el-select>
                          </div>
                        </el-col>
                        <el-col span={6}>
                          <div>
                            <el-input-number v-model={this.quantity}></el-input-number>
                          </div>
                        </el-col>
                        <el-col span={6}>
                          <div>
                            <el-button type='primary' onClick={() => {
                              this.axios.post(`/manage/specification-materials`, {
                                specification: this.data,
                                quantity: this.quantity,
                                material: this.material
                              }).then((res) => {
                                this.$message.success('新建成功！')
                                this.getSpecificationMatrerials()
                                this.material = ''
                                this.quantity = 1
                              })
                            }}>新增</el-button>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <span slot='footer' class='dialog-footer'>
                      <el-button onClick={() => { this.show = false }}>关 闭</el-button>
                    </span>
                  </el-dialog>
                </div>
              )
            }
          }
        }
      ]
    }
  }
}
